<template>
  <div class="app-container">
    <el-form :inline="true" size="mini" :model="queryParams" @keyup.enter.native="loadData()">
      <el-form-item label="名称">
        <el-input v-model="queryParams.key" placeholder="优惠券名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="loadData">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="selections.length === 0"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
    </el-row>

    <el-table
      :data="dataList"
      border
      v-loading="loading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column width="200px" prop="name" header-align="center" align="center" label="名称">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.name" class="item" effect="dark" :content="scope.row.name" placement="top-start">
            <span> {{ scope.row.name.length <= 20 ? scope.row.name : (scope.row.name.substr(0,20) + '...')}} </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column width="150px" prop="type" header-align="center" align="center" label="类型">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.coupon_type" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column width="150px" prop="useType" header-align="center" align="center" label="领取方式">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.coupon_receive_type" :value="scope.row.receiveType"/>
        </template>
      </el-table-column>
      <el-table-column prop="amount" header-align="center" align="center" label="面额">
        <template slot-scope="scope">
          <span>{{ scope.row.amount + '元' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="minPoint" header-align="center" align="center" label="最低金额">
        <template slot-scope="scope">
          <span>{{ scope.row.minPoint + '元' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" header-align="center" align="center" label="总量"></el-table-column>
      <el-table-column width="150px" prop="limited" header-align="center" align="center" label="限制数量/人"></el-table-column>
      <el-table-column width="300px" header-align="center" align="center" label="有效时间">
        <template slot-scope="scope">
          {{ scope.row.startTime + '~' + scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="useCount" header-align="center" align="center" label="使用数量"></el-table-column>
      <el-table-column prop="receiveCount" header-align="center" align="center" label="领取数量"></el-table-column>
      <el-table-column prop="status" header-align="center" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status === 0 ? '未发布' : '已发布' }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="200px" label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-sell" size="small" v-if="scope.row.status === 0" @click="publish(scope.row.id)">发布</el-button>
          <el-button type="text" icon="el-icon-edit" size="small" @click="handleUpdate(scope.row.id)">修改</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="loadData"
    />

    <coupon-form ref="dataForm" @ok="loadData"></coupon-form>
  </div>
</template>

<script>
import couponForm from './couponForm.vue'
import {couponList, deleteCoupon, updateCoupon} from '@/api/coupon/coupon'

export default {
  dicts: ['coupon_type', 'coupon_receive_type'],
  data() {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      dataList: [],
      total: 0,
      loading: false,
      selections: [],
      addOrUpdateVisible: false,
      memberLevels: {}
    }
  },
  components: {
    couponForm
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      couponList(this.queryParams).then(res => {
        if (res.success) {
          this.dataList = res.data.records
          this.total = res.data.total
        }
        this.loading = false
      })
    },

    publish(id) {
      let data = {
        id,
        status: 1
      }
      updateCoupon(data).then(res => {
        if (res.success) {
          this.loadData()
          this.$message.success('优惠券已发布')
        }
      })
    },

    selectionChangeHandle(val) {
      this.selections = val
    },

    handleAdd() {
      this.$refs.dataForm.add()
    },

    handleUpdate(id) {
      this.$refs.dataForm.edit(id)
    },

    resetQuery() {
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
      }
      this.loadData()
    },

    // 删除
    handleDelete(id) {
      let ids = id ? [id] : this.selections.map(item => {
        return item.id
      })
      this.$confirm(
        '确认删除已选中数据?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        deleteCoupon(ids).then(res => {
          if (res.success) {
            this.loadData()
            this.$message.success('删除成功')
          }
        })
      })
    }
  }
}
</script>
